<template>
  <div class="vue-rem clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">安装依赖并引入</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install lib-flexible --save<br>
            // main.js<br>
            import 'lib-flexible'<br>
            // index.html<br>
            &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">方法一:scss函数</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // $base-font-size = 设计图的宽度/10<br>
            @function px2rem($px, $base-font-size: 36px) {<br>
              &nbsp;&nbsp;@return ($px / $base-font-size) * 1rem;<br>
            }
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">方法二:vsCode插件配置</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            安装插件:px-to-rem<br>
            修改code首选项设置:px-to-rem.px-per-rem = 设计图样式的px宽度/10<br>
            使用:选中需转换的css,操作option+Z
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'VueRem'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-rem{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
